<template>
  <view v-if="show">
    <view class="uni-padding-wrap">
      <block v-if="!recording && !playing && !hasRecord">
        <view class="page-body-time">
          <text class="time-big">{{ formatedRecordTime }}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" @click="startRecord">
            <image src="@/static/record.png"></image>
          </view>
        </view>
      </block>
      <block v-if="recording === true">
        <view class="page-body-time">
          <text class="time-big">{{ formatedRecordTime }}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" @click="stopRecord">
            <view class="button-stop-record"></view>
          </view>
        </view>
      </block>
      <block v-if="hasRecord === true && playing === false">
        <view class="page-body-time">
          <text class="time-big">{{ formatedPlayTime }}</text>
          <text class="time-small">{{ formatedRecordTime }}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" @click="playVoice">
            <image src="@/static/play.png"></image>
          </view>
          <view class="page-body-button" @click="clear">
            <image src="@/static/trash.png"></image>
          </view>
        </view>
      </block>
      <block v-if="hasRecord === true && playing === true">
        <view class="page-body-time">
          <text class="time-big">{{ formatedPlayTime }}</text>
          <text class="time-small">{{ formatedRecordTime }}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" @click="stopVoice">
            <image src="@/static/stop.png"></image>
          </view>
          <view class="page-body-button" @click="clear">
            <image src="@/static/trash.png"></image>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
// #ifdef APP-PLUS
import permision from "@/common/permission.js"
// #endif
var playTimeInterval = null;
var recordTimeInterval = null;
var recorderManager = null;
var music = null;
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  emits: ['recorderStop'],
  data() {
    return {
      recording: false, //录音中
      playing: false, //播放中
      hasRecord: false, //是否有了一个
      tempFilePath: '',
      recordTime: 0,
      playTime: 0,
      formatedRecordTime: '00:00:00', //录音的总时间
      formatedPlayTime: '00:00:00' //播放录音的当前时间
    }
  },
  beforeDestroy: function () {
    this.clear();
  },
  mounted() {
    music = uni.createInnerAudioContext();
    music.onEnded(() => {
      clearInterval(playTimeInterval)
      var playTime = 0
      // console.log('play voice finished')
      this.playing = false;
      this.formatedPlayTime = this.formatTime(playTime);
      this.playTime = playTime;
    });
    recorderManager = uni.getRecorderManager();
    recorderManager.onStart(() => {
      // console.log('recorder start');
      this.recording = true;
      recordTimeInterval = setInterval(() => {
        this.recordTime += 1;
        this.formatedRecordTime = this.formatTime(this.recordTime);
      }, 1000)
    });
    recorderManager.onStop((res) => {
      // console.log('on stop');
      music.src = res.tempFilePath;
      this.hasRecord = true;
      this.recording = false;
      this.$emit('recorderStop', {
        formatedRecordTime: this.formatedRecordTime,
        recordTime: this.recordTime < 1 ? this.recordTime + 1 : this.recordTime,
        recordFilePath: res.tempFilePath
      })
      this.clear()
    });
    recorderManager.onError(() => {
      console.log('recorder onError');
    });
  },
  methods: {
    formatTime(time) {
      if (typeof time !== 'number' || time < 0) {
        return time
      }

      var hour = parseInt(time / 3600)
      time = time % 3600
      var minute = parseInt(time / 60)
      time = time % 60
      var second = time

      return ([hour, minute, second]).map(function (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      }).join(':')
    },
    async startRecord() { //开始录音
      // #ifdef APP-PLUS
      let status = await this.checkPermission();
      if (status !== 1) {
        return;
      }
      // #endif

      // TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用录音，但没有状态或回调判断用户拒绝
      recorderManager.start({
        duration: 600000,
        sampleRate: 44100,
        format: 'mp3'
      });
    },
    stopRecord() { //停止录音
      recorderManager.stop();

    },
    playVoice() {
      // console.log('play voice');
      this.playing = true;
      playTimeInterval = setInterval(() => {
        this.playTime += 1;
        this.formatedPlayTime = this.formatTime(this.playTime);
      }, 1000)
      music.play();
    },
    stopVoice() {
      clearInterval(playTimeInterval)
      this.playing = false;
      this.formatedPlayTime = this.formatTime(0);
      this.playTime = 0;
      music.stop();
    },
    end() {
      music.stop();
      recorderManager.stop();
      clearInterval(recordTimeInterval)
      clearInterval(playTimeInterval);
      this.recording = false, this.playing = false, this.hasRecord = false;
      this.playTime = 0, this.recordTime = 0;
      this.formatedRecordTime = "00:00:00", this.formatedRecordTime = "00:00:00";
    },
    clear() {
      this.end();
    }
    // #ifdef APP-PLUS
    ,
    async checkPermission() {
      let status = permision.isIOS ? await permision.requestIOS('record') :
          await permision.requestAndroid('android.permission.RECORD_AUDIO');

      if (status === null || status === 1) {
        status = 1;
      } else if (status === 2) {
        uni.showModal({
          content: "系统麦克风已关闭",
          confirmText: "确定",
          showCancel: false,
          success: function (res) {
          }
        })
      } else {
        uni.showModal({
          content: "需要麦克风权限",
          confirmText: "设置",
          success: function (res) {
            if (res.confirm) {
              permision.gotoAppSetting();
            }
          }
        })
      }
      return status;
    }
    // #endif
  }
}
</script>

<style scoped>
.uni-padding-wrap {
}

image {
  width: 130rpx;
  height: 130rpx;
}

.page-body-wrapper {
  justify-content: space-between;
  flex-grow: 1;
  margin-bottom: 300rpx;
}

.page-body-time {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-big {
  font-size: 26rpx;
  margin: 20rpx;
}

.time-small {
  font-size: 26rpx;
}

.page-body-buttons {
  display: flex;
  justify-content: space-around;
}

.page-body-button {
  /* width: 250rpx; */
  text-align: center;
}

.button-stop-record {
  box-sizing: border-box;
  width: 130rpx;
  height: 130rpx;
  border: 20rpx solid #fff;
  background-color: #4CD964;
  border-radius: 50%;
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 1;
  }
}
</style>
